<template>
  <div class="hello">
    <div id="echarts" ref="chart" style="height: 500px;width: 600px" />
    <button @click="remove">返回长春地图</button>
  </div>
</template>

<script setup>
import * as echarts from 'echarts' // 引入echarts
import ccs from '@/assets/json/city/ccs.json'
import _220102 from '@/assets/json/contities/220102.json'
import _220103 from '@/assets/json/contities/220103.json'
import _220104 from '@/assets/json/contities/220104.json'
import _220105 from '@/assets/json/contities/220105.json'
import _220106 from '@/assets/json/contities/220106.json'
import _220112 from '@/assets/json/contities/220112.json'
import _220113 from '@/assets/json/contities/220113.json'
import _220122 from '@/assets/json/contities/220122.json'
import _220182 from '@/assets/json/contities/220182.json'
import _220183 from '@/assets/json/contities/220183.json'
import _220184 from '@/assets/json/contities/220184.json'
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'

const chart = ref()

// 各省的人口数据
const mapData = [
  { name: '吉林省农业科学院', value: [125.375698, 43.820834] },
  { name: '吴中天玺', value: [125.375719, 43.852687] },
  { name: '长春卫生大厦', value: [125.271177, 43.884601] },
  { name: '绿地海域中央墅', value: [125.376384, 43.82054] },
  { name: '北湖科技园', value: [125.397429, 43.98707] },
  { name: '西宸之光', value: [125.176098, 43.855937] }
]
// 用做点击完带到init方法的数据
const provinces = {
  南关区: _220102,
  宽城区: _220103,
  朝阳区: _220104,
  二道区: _220105,
  绿园区: _220106,
  双阳区: _220112,
  九台区: _220113,
  农安县: _220122,
  榆树市: _220182,
  德惠市: _220183,
  公主岭市: _220184
}

const init = (name) => {
  // 获取图标 初始化
  var myChart = echarts.init(document.getElementById('echarts'))

  // 图标指定数据
  echarts.registerMap(name, name)

  const option = {
    // 图标标题
    title: {
      text: '地图'
    },
    // 鼠标移入显示的内容
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c} (p / km2)'
    },
    // 数据视图
    /*    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },*/
    // 用于设置地图的高量
    /*    visualMap: {
      min: 800,
      max: 3000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['#e4f1d7', '#fde8cd', '#fad8e9', '#e4f1d5', '#e0f7cc', '#ddcfe8', '#f1ebd1', '#e0cee4']
      }
    },*/
    geo: [
      {
        // 指定图标为地图
        type: 'map',
        // 设置数据
        map: name,
        zoom: 1.2, // 改变这个值的大小就可以了
        // 开启缩放
        roam: true,
        // 设置缩放的大小
        scaleLimit: {
          min: 1.2,
          max: 30
        },
        // 自定义名称映射
        label: {
          show: true
        },
        itemStyle: {
          areaColor: '#009ad6'
        }
      }
    ],
    series: [
      {
        /*        type: 'map',
        // 跟geo关联
        geoIndex: 0,*/
        name: '在地图中显示散点图',
        type: 'scatter',
        coordinateSystem: 'geo', // 设置坐标系为 geo
        // 设置人口的数据  用于显示在地图上
        data: mapData
      }
    ]
  }

  // 把option设置给myChart实例
  myChart.setOption(option, true)

  // 点击切换到省份
  myChart.on('click', function(params) {
    // 拿到点击的哪一个省份 用provinces里面对象的数据带到init方法里面用于渲染省份
    init(provinces[params.name])
  })
}

// 点击回到中国地图
function remove() {
  init(ccs)
}

function queryProjectList() {
  const that = this
  axios.get('api/project/queryProjectList').then(res => {
    console.log('res: {} ', res)
    that.mapData = res
    init(ccs)
  }).catch(err => {
    console.log('err: {} ', err)
  })
}

// 加载完就调用的方法 vue3生命周期
onMounted(() => {
  // queryProjectList()
  init(ccs)
  setTimeout(() => {
    // init(ccs)
  }, 2000)
})
</script>

<style scoped>
</style>
